<template>
  <div>
    <div class="content-top">
      <div class="top-left">
        <span class="top-left-span">当前人员数量</span>
      </div>
      <div class="top-right">
        <span class="top-right-num">{{num}}</span><span class="company">人</span>
      </div>
    </div>
    <MouldBox :chartOption="chartOption" :datas="lists" :text="['']" :orderKeys="orderKeys"></MouldBox>
  </div>
</template>

<script>
import MouldBox from '../common/MouldBoxV2.vue';
export default {
  data() {
    return {
      chartOption: {
        color: ['#00FDFF'],
        area: true,
        unit: '%'
      },
      orderKeys: ['跟班队干', '爆破', '维修', '电工', '三机巡检'],
      lists: [
        {
          'alarmCount': 70,
          'level1': 'GBDG',
          'level1Desc': '跟班队干'
        },
        {
          'alarmCount': 43,
          'level1': 'BP',
          'level1Desc': '爆破'
        },
        {
          'alarmCount': 77,
          'level1': 'WX',
          'level1Desc': '维修'
        },
        {
          'alarmCount': 93,
          'level1': 'DG',
          'level1Desc': '电工'
        },
        {
          'alarmCount': 67,
          'level1': 'SJXJ',
          'level1Desc': '三机巡检'
        }
      ]
    };
  },

  components: {
    MouldBox
  },

  computed: {
    num() {
      const num = this.lists.reduce((pre, cur) => {
        return pre + cur.alarmCount;
      }, 0);
      return num;
    }
  },

  methods: {}
};
</script>
<style scoped lang="scss">
.company{
  color: #838383;
  font-size: .75rem;
}
.content-top {
  width: 20.625rem;
  height: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.625rem;
  background-color: #1d2e45;
  padding: 0.9375rem;
  box-sizing: border-box;
  .top-left {
    .top-left-span {
      font-size: 0.875rem;
      color: #f8f8f8;
      vertical-align: middle;
    }
  }
  .top-right-num {
    color: #f8f8f8;
    font-size: 1rem;
    margin-right: 0.3125rem;
  }
}
</style>
